@import "../../static/layout/base.less";
@grey1:#4d5665;
@grey2:#78849a;
@blue:#03b6f8;

.widget-sidebar{
  width: 200px;
  background: #fff;
  color:@grey1;
  box-shadow: 2px 2px 2px #e5e5e5;
//  color:#fff;
  a{
    color:@blue;
    cursor: pointer;
  }
  a:hover{
    color: #17c7ff;
  }
  .info{
    padding:10px 20px;
    border-bottom:1px solid #e8e8e8;
    .name{
      height: 30px;
      line-height: 30px;
      font-size:15px;
      text-align: center;
      a{
        font-size:13px;
      }
    }
    .security-auth{
      padding:10px 0;
      li{
        height: 30px;
        width: 25%;
        float: left;
      }
      .card{
        background: url(./image/s-card.png) no-repeat center center;
      }
      .card-active{
        background: url(./image/s-card-h.png) no-repeat center center;
      }
      .locked{
        background: url(./image/s-locked.png) no-repeat center center;
      }
      .locked-active{
        background: url(./image/s-locked-h.png) no-repeat center center;
      }
      .phone{
        background: url(./image/s-phone.png) no-repeat center center;
      }
      .phone-active{
        background: url(./image/s-phone-h.png) no-repeat center center;
      }
      .mail{
        background: url(./image/s-mail.png) no-repeat center center;
      }
      .mail-active{
        background: url(./image/s-mail-h.png) no-repeat center center;
      }
    }
    .security-level{
      border:1px solid #03b6f8;
      padding:3px 0;
      width: 100%;
      margin-top:10px;
      tr{
        td{
          padding:2px;
          width: 33%;
          span{
            display: block;
            border:1px solid #1cdaff;
            height: 4px;
          }
          .active{
            background: #03b6f8;
            border:1px solid #03b6f8;
          }
        }
      }
    }
    .security-desc{
      height: 30px;
      line-height: 30px;
      font-size:12px;
      span{
        float: left;
        margin-right:5px;
      }
      a{
        float: right;
      }
    }
  }

  .wallet{
     padding:20px;
    .desc{
      line-height: 25px;
      font-weight: 700;
    }
    .value{
      height: 30px;
      line-height: 30px;
      color:@blue;
      font-size:22px;
      font-weight: 700;
//      font-family: Times;
    }
    .recharge-btn{
      display: block;
      padding:12px 0;
      text-align: center;
      color:#fff;
      margin-top:5px;
    }
  }



  .bar-list{
    ul{
      li{
        height: 40px;
        background: #f1f1f1;
        margin-bottom:15px;
        .border-radius(2px);
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        .transition(all .3s ease);
        a{
          display: block;
          width: 100%;
          height: 100%;
          color: #8f8f8f;
        }
      }
      li:hover{
        .transform(translate(2px,-2px));
        background: #c7c7c7;
        a{
          color:#fff;
        }

      }
      .active{
        .transform(translate(2px,-2px));
        background: #c7c7c7;
        a{
          color:#fff;
        }
      }
    }
    .type{
      height: 35px;
      line-height: 35px;
      font-weight: 700;
      font-size:15px;
    }
    .account ,.assets{
      padding:20px;
    }
    .account{
      border-bottom:1px solid #d7d7d7;
      .amount{
        background: url(./image/account.png) no-repeat 10px center;
      }
      .record{
        background: url(./image/record.png) no-repeat 10px center;
      }
      .bank{
        background: url(./image/bank.png) no-repeat 10px center;
      }
      .coupon{
        background: url(./image/coupon.png) no-repeat 10px center;
      }
      .bonus{
        background: url(./image/bonus.png) no-repeat 10px center;
      }
    }
    .assets{
      .demand{
        background: url(./image/demand.png) no-repeat 10px center;
      }
      .term{
        background: url(./image/term.png) no-repeat 10px center;
      }
      .iphone{
        background: url(./image/iphone.png) no-repeat 10px center;
      }
    }
  }

  .system{
    padding:0 20px;
    a{
      padding:10px 0;
      display: block;
      text-align: center;
      font-size: 14px;
    }
    a:hover{
      color:#fff;
    }
    .active{
      background: @blue;
      color:#fff;
    }
  }

  .security{
    padding:20px;
    a{
      display: block;
      height: 35px;
      line-height: 35px;
      background: @blue url(./image/safe.png) no-repeat 10px center;
      color:#fff;
      .border-radius(2px);
      text-align: center;
    }
    a:hover{
      background-color: #17c7ff;
    }
  }
}